<template>
	<view class="post-detail">
		<hm-news-detail :options="options"></hm-news-detail>
		<audio style="text-align: left" :src="options.src" :poster="options.poster" :name="options.name"
			:author="options.author" :action="audioAction" controls></audio>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	import HmNewsDetail from '@/components/hm-news-detail/index.vue'
	import {
		getPostDetails
	} from '@/api/post.js'
	import {
		realSrc
	} from '@/utils/common.js'
	import {
		list,
		save,
		saveWithImg
	} from '@/api/commnet.js'
	import {
		uploadImgs
	} from '@/api/system/uploadFile.js'
	import config from "@/config.js"

	export default {
		components: {
			HmNewsDetail
		},
		data() {
			return {
				audioAction: {
					method: 'pause'
				},
				options: {
					yunshu: '/static/hm-news-detail/images/img_22946_0_0.png',
					author: '毫末科技',
					like: '',
					share: '',
					time: '2 minutes ago',
					title: '如何用 Python 在笔记本上分析100GB 数据',
					img: '/static/hm-news-detail/images/img_22946_0_3.png',
					content: '第 1 种是对数据进行子抽样，但它有一个明显缺点：可能因忽略部分数据而错失关键信息，甚至误解数据表达的含义。第 2 种是使用分布式计算。虽然在某些情况下这是一种有效的方法，但是管理和维护集群会带来巨大开销。想象一下，要为一个刚超出内存大小、大概 30-50GB 的数据集就建立一套集群，对我来说，这似乎有点“用力过猛”。',
					src: ""
				}
			};
		},
		onLoad(e) {
			getPostDetails(e.id).then(res => {
				console.log(res)
				this.options.yunshu = config.baseUrl + res.data.imgList
				this.options.author = res.data.nickName
				this.options.content = res.data.content
				this.options.title = res.data.title
				this.options.img = config.baseUrl + res.data.imgList
				this.options.src = config.baseUrl + res.data.mp3
			})
			console.log(e.id)
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.post-detail {
		padding-bottom: 120rpx; // 评论框底部安全距离

		.comment-top {
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-weight: 700;
			}

			.tab {
				display: flex;

				.tab-item {
					padding: 10rpx;

					&.active {
						font-weight: 700;
					}
				}
			}
		}
	}
</style>